<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<html>
<head>
    <title>开发者平台--手游基础信息列表</title>
</head>
<!-- Bootstrap -->
<link href="${pageContext.request.contextPath}/statics/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome -->
<link href="${pageContext.request.contextPath}/statics/css/font-awesome.min.css" rel="stylesheet">
<!-- NProgress -->
<link href="${pageContext.request.contextPath}/statics/nprogress.css" rel="stylesheet">
<!-- iCheck -->
<link href="${pageContext.request.contextPath}/statics/css/green.css" rel="stylesheet">
<!-- bootstrap-progressbar -->
<link href="${pageContext.request.contextPath}/statics/css/bootstrap-progressbar-3.3.4.min.css" rel="stylesheet">
<!-- JQVMap -->
<link href="${pageContext.request.contextPath}/statics/css/jqvmap.min.css" rel="stylesheet"/>
<!-- Custom Theme Style -->
<link href="${pageContext.request.contextPath}/statics/css/custom.min.css" rel="stylesheet">
<div class="nav-md">
    <div class="container body">
        <div class="main_container">
            <div class="col-md-3 left_col">
                <div class="left_col scroll-view">
                    <div class="navbar nav_title" style="border: 0;">
                        <a href="index.html" class="site_title"><i class="fa fa-paw"></i>
                            <span>BeyondPlatfrom</span></a>
                    </div>
                    <div class="clearfix"></div>
                    <!-- menu profile quick info -->
                    <div class="profile">
                        <div class="profile_pic">
                            <img src="${pageContext.request.contextPath}/statics/images/img.jpg" alt="..."
                                 class="img-circle profile_img">
                        </div>
                        <div class="profile_info">
                            <span>欢迎你,</span>
                            <h2>${devUser.devName}</h2>
                        </div>
                    </div>
                    <!-- /menu profile quick info -->
                    <br/>
                    <!-- sidebar menu -->
                    <div id="sidebar-menu" class="main_menu_side hidden-print main_menu">
                        <div class="menu_section">
                            <h3>测试人员</h3>
                            <ul class="nav side-menu">
                                <li><a><i class="fa fa-home"></i> 开发者账户管理 <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li><a href="index.html">用户中心</a></li>
                                    </ul>
                                </li>
                                <li><a><i class="fa fa-desktop"></i> 手游应用管理 <span class="fa fa-chevron-down"></span></a>
                                    <ul class="nav child_menu">
                                        <li>
                                            <a href="${pageContext.request.contextPath}/devController/toDevAppList">手游应用维护</a>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <!-- /sidebar menu -->
                    <!-- menu footer buttons -->
                    <div class="sidebar-footer hidden-small">
                        <a data-toggle="tooltip" data-placement="top" title="Settings">
                            <span class="glyphicon glyphicon-cog" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="FullScreen">
                            <span class="glyphicon glyphicon-fullscreen" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="Lock">
                            <span class="glyphicon glyphicon-eye-close" aria-hidden="true"></span>
                        </a>
                        <a data-toggle="tooltip" data-placement="top" title="Logout">
                            <span class="glyphicon glyphicon-off" aria-hidden="true"></span>
                        </a>
                    </div>
                    <!-- /menu footer buttons -->
                </div>
            </div>

            <!-- top navigation -->
            <div class="top_nav">
                <div class="nav_menu">
                    <nav>
                        <div class="nav toggle">
                            <a id="menu_toggle"><i class="fa fa-bars"></i></a>
                        </div>
                        <ul class="nav navbar-nav navbar-right">
                            <li class="">
                                <a href="javascript:;" class="user-profile dropdown-toggle" data-toggle="dropdown"
                                   aria-expanded="false">
                                    <img src="${pageContext.request.contextPath}/statics/images/img.jpg"
                                         alt="">${devUser.devName}
                                    <span class=" fa fa-angle-down"></span>
                                </a>
                                <ul class="dropdown-menu dropdown-usermenu pull-right">
                                    <li><a href="${pageContext.request.contextPath}/devUserController/logout"><i
                                            class="fa fa-sign-out pull-right"></i> Log Out</a></li>
                                </ul>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
            <!-- /top navigation -->

            <!-- page content -->
            <div class="right_col" role="main">


                <div class="clearfix"></div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>
                                    APP 审核列表 <i class="fa fa-user"></i><small>${devUser.devName}
                                    - 您可以通过搜索或者其他的筛选项对APP的信息进行审核操作。^_^</small>
                                </h2>
                                <div class="clearfix"></div>
                            </div>

                            <div class="x_panel">
                                <form class="form-horizontal" method="post"
                                      action="${pageContext.request.contextPath}/devController/toDevAppList">
                                    <input type="hidden" name="checkId" value="${appInfo.checkId}">
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label for="name" class="col-sm-3 control-label">手机名称</label>
                                        <div class="col-sm-9">
                                            <input class="form-control" id="name" placeholder="" name="softwareName"
                                                   value="${appInfo.softwareName }">
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label class="col-sm-3 control-label">手游状态</label>
                                        <div class="col-sm-9">
                                            <input type="hidden" value="${appInfo.status}" id="status">
                                            <select class="form-control" name="status" id="gamestatus">
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label class="col-sm-3 control-label">所属平台</label>
                                        <div class="col-sm-9">
                                            <input type="hidden" value="${appInfo.flatformId}" id="flatform">
                                            <select class="form-control" name="flatformId" id="flatformId">
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label class="col-sm-3 control-label">一级分类</label>
                                        <div class="col-sm-9">
                                            <input type="hidden" value="${appInfo.categoryLevel1}" id="level1">
                                            <select class="form-control" name="categoryLevel1" id="queryCategoryLevel1">
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label class="col-sm-3 control-label">二级分类</label>
                                        <div class="col-sm-9">
                                            <input type="hidden" value="${appInfo.categoryLevel2}" id="level2">
                                            <select class="form-control" name="categoryLevel2" id="queryCategoryLevel2">
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-4 col-sm-12 col-xs-12 form-group">
                                        <label class="col-sm-3 control-label">三级分类</label>
                                        <div class="col-sm-9">
                                            <input type="hidden" value="${appInfo.categoryLevel3}" id="level3">
                                            <select class="form-control" name="categoryLevel3" id="queryCategoryLevel3">
                                                <option value="">--请选择--</option>
                                            </select>
                                        </div>
                                    </div>
                                    <div class="col-md-11 col-sm-12 col-xs-12 form-group">
                                        <div class="col-md-2 col-md-offset-12">
                                            <button type="submit" class="btn btn-success">查询</button>
                                        </div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content">
                                <p class="text-muted font-13 m-b-30"></p>
                                <div id="datatable-responsive_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <div class="row">
                                        <div class="col-md-2 form-group">
                                            <a href="${pageContext.request.contextPath}/devController/toDevAdd">
                                                <button type="submit" class="btn btn-success">新增App基础信息</button>
                                            </a>
                                        </div>
                                        <div class="col-sm-12">
                                            <table id="datatable-responsive"
                                                   class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                                   cellspacing="0" width="100%" role="grid"
                                                   aria-describedby="datatable-responsive_info"
                                                   style="width: 100%;">
                                                <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 70px;"
                                                        aria-label="First name: activate to sort column descending"
                                                        aria-sort="ascending">软件名称
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 10%;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        APK名称
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 5%;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        软件大小(单位:M)
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 50px;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        所属平台
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 170px;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        所属分类(一级分类、二级分类、三级分类)
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 8%;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        状态
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 30px;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        下载次数
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 6%;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        最新版本号
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        style="width: 14%;"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        操作
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <c:forEach var="dev" items="${devAppInfoList}">
                                                    <tr role="row" class="odd" id="${dev.id}">
                                                        <td tabindex="0" class="sorting_1">${dev.softwareName}</td>
                                                        <td>${dev.APKName}</td>
                                                        <td>${dev.softwareSize}</td>
                                                        <td>${dev.flatformName}</td>
                                                        <td>${dev.categoryLevel1Name} --> ${dev.categoryLevel2Name}--> ${dev.categoryLevel3Name}</td>
                                                        <c:choose>
                                                            <c:when test="${dev.statusName == '已下架'}">
                                                                <td style="color: palevioletred">${dev.statusName}</td>
                                                            </c:when>
                                                            <c:when test="${dev.statusName == '已上架'}">
                                                                <td style="color: #00CC33">${dev.statusName}</td>
                                                            </c:when>
                                                            <c:otherwise>
                                                                <td>${dev.statusName}</td>
                                                            </c:otherwise>
                                                        </c:choose>
                                                        <td>${dev.downloads }</td>
                                                        <td>${dev.versionNo}</td>
                                                        <td>
                                                            <div class="btn-group">
                                                                <button type="button" class="btn btn-danger">点击操作
                                                                </button>
                                                                <button type="button" style="height:34px"
                                                                        class="btn btn-danger dropdown-toggle"
                                                                        data-toggle="dropdown" aria-haspopup="true"
                                                                        aria-expanded="false">
                                                                    <span class="caret"></span>
                                                                    <span class="sr-only">Toggle Dropdown</span>
                                                                </button>
                                                                <ul class="dropdown-menu">
                                                                    <li>
                                                                        <a href="${pageContext.request.contextPath}/devController/toVersionAdd?id=${dev.id}">新增版本</a>
                                                                    </li>
                                                                   <%-- <li><a href="javascript:void(0)"
                                                                           onclick="modifyVer(${dev.status},${dev.versionId},${dev.id})">修改版本</a>
                                                                    </li>--%>
                                                                    <c:choose>
                                                                        <c:when test="${dev.versionNo==null}">
                                                                            <li><a href="javascript:void(0)" onclick="modifyNO()">修改版本</a></li>
                                                                        </c:when>
                                                                        <c:otherwise>
                                                                            <li><a href="javascript:void(0)"onclick="modifyVer(${dev.status},${dev.versionId},${dev.id})">修改版本</a>
                                                                        </c:otherwise>
                                                                    </c:choose>
                                                                    <c:choose>
                                                                        <c:when test="${dev.status == 2 || dev.status == 5}">
                                                                            <li><a href="javascript:void(0)"
                                                                                   onclick="appPut('${dev.softwareName}',${dev.status},${dev.id},${dev.checkId})">上架</a>
                                                                            </li>
                                                                        </c:when>
                                                                        <c:when test="${dev.status == 4}">
                                                                            <li><a href="javascript:void(0)"
                                                                                   onclick="appPut('${dev.softwareName}',${dev.status},${dev.id},${dev.checkId})">下架</a>
                                                                            </li>
                                                                        </c:when>
                                                                    </c:choose>
                                                                    <li>
                                                                        <a href="${pageContext.request.contextPath}/devController/toDevModify?aid=${dev.id}">修改</a>
                                                                    </li>
                                                                    <li>
                                                                        <a href="${pageContext.request.contextPath}/devController/toDevView?aid=${dev.id}">查看</a>
                                                                    </li>
                                                                    <li><a href="javascript:void(0)"
                                                                           onclick="delAppInfo('${dev.softwareName}',${dev.id})">删除</a>
                                                                    </li>
                                                                </ul>
                                                            </div>
                                                        </td>
                                                    </tr>
                                                    </tr>
                                                </c:forEach>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        共 [${page.totalCount}] 条记录 &nbsp;${page.currentPageNo}/${page.totalPageCount} 页
                                    </div>
                                    <div class="col-md-offset-9 col-md-5">
                                        <c:if test="${page.currentPageNo>1}">
                                            <a href="${pageContext.request.contextPath}/devController/toDevAppList?pageIndex=1&softwareName=${appInfo.softwareName}&flatformId=${appInfo.flatformId}&categoryLevel1=${appInfo.categoryLevel1}&categoryLevel2=${appInfo.categoryLevel2}&categoryLevel3=${appInfo.categoryLevel3}&status=${appInfo.status}">
                                                <button type="button" class="btn btn-primary">首页</button>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/devController/toDevAppList?pageIndex=${page.currentPageNo-1}&softwareName=${appInfo.softwareName}&flatformId=${appInfo.flatformId}&categoryLevel1=${appInfo.categoryLevel1}&categoryLevel2=${appInfo.categoryLevel2}&categoryLevel3=${appInfo.categoryLevel3}&status=${appInfo.status}">
                                                <button type="button" class="btn btn-success">上一页</button>
                                            </a>
                                        </c:if>
                                        <c:if test="${page.currentPageNo<page.totalPageCount}">
                                            <a href="${pageContext.request.contextPath}/devController/toDevAppList?pageIndex=${page.currentPageNo+1}&softwareName=${appInfo.softwareName}&flatformId=${appInfo.flatformId}&categoryLevel1=${appInfo.categoryLevel1}&categoryLevel2=${appInfo.categoryLevel2}&categoryLevel3=${appInfo.categoryLevel3}&status=${appInfo.status}">
                                                <button type="button" class="btn btn-info">下一页</button>
                                            </a>
                                            <a href="${pageContext.request.contextPath}/devController/toDevAppList?pageIndex=${page.totalPageCount==0?1:page.totalPageCount}&softwareName=${appInfo.softwareName}&flatformId=${appInfo.flatformId}&categoryLevel1=${appInfo.categoryLevel1}&categoryLevel2=${appInfo.categoryLevel2}&categoryLevel3=${appInfo.categoryLevel3}&status=${appInfo.status}">
                                                <button type="button" class="btn btn-warning">末页</button>
                                            </a>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /page content -->

            <!-- footer content -->
            <footer>
                <div class="pull-right">
                    Gentelella - Bootstrap Admin Template by <a href="https://colorlib.com">Colorlib</a>
                </div>
                <div class="clearfix"></div>
            </footer>
            <!-- /footer content -->
        </div>
    </div>
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/statics/js/jquery-1.8.3.js"></script>
    <script>
        function delAppInfo(softwareName, id,i) {
            if (confirm("你确定要删除APP应用【" + softwareName + "】及其所有版本吗？")) {
                $.getJSON("/BeyondPlatfrom/devController/delAppInfo", {aid: id}, function (data) {
                    console.log(data)
                    if (data) {
                         $("#" + id).remove();
                    }
                });
            }
        }
        function modifyNO() {
            alert("没有最新版本号，不能修改！")
        }
        function appPut(softwareName, status, id,checkId) {
            if (status == 5||status==2) {
                confirm("你确定要上架APP应用【" + softwareName + "】吗？")
                location.href = "${pageContext.request.contextPath}/devController/appPut?status=" + status + "&id=" + id+"&checkId="+checkId;
            } else if (status == 4) {
                confirm("你确定要下架APP应用【" + softwareName + "】吗？")
                location.href = "${pageContext.request.contextPath}/devController/appPut?status=" + status + "&id=" + id+"&checkId="+checkId;
            }
        }

        function modifyVer(status, versionId, id) {
            if (status == 2 || status == 4 || status == 5) {
                alert("状态为审核通过、已上架、已下架不能修改版本信息");
            } else if (status == 1 || status == 3) {
                if (versionId > 0) {
                    location.href = "${pageContext.request.contextPath}/devController/toUpdateVersion?aid=" + id + "&vid=" + versionId;
                }
            }
        }

        $(function () {
            $.getJSON("/BeyondPlatfrom/devController/gamestatus", "", function (data) {
                $("#gamestatus").html("");
                var str = " <option value=\"0\">请选择手游状态</option>";
                for (var i = 0; i < data.length; i++) {
                    if ($("#status").val() == data[i].valueId) {
                        str += "<option selected value=" + data[i].valueId + ">" + data[i].valueName + "</option>"
                    } else {
                        str += "<option value=" + data[i].valueId + ">" + data[i].valueName + "</option>"
                    }
                }
                $("#gamestatus").html(str);
            });
            $.getJSON("/BeyondPlatfrom/devController/findApp", "", function (data) {
                $("#flatformId").html("");
                var str = " <option value=\"0\">请选择所属平台</option>";
                for (var i = 0; i < data.length; i++) {
                    if ($("#flatform").val() == data[i].valueId) {
                        str += "<option selected value=" + data[i].valueId + ">" + data[i].valueName + "</option>"
                    } else {
                        str += "<option  value=" + data[i].valueId + ">" + data[i].valueName + "</option>"
                    }
                }
                $("#flatformId").html(str);
            });

            $.getJSON("/BeyondPlatfrom/devController/getLevel1", {parentId: 1}, function (data) {
                $("#queryCategoryLevel1").html("");
                var str = " <option value=\"0\">请选择一级分类</option>";
                for (var i = 0; i < data.length; i++) {
                    if ($("#level1").val() == data[i].id) {
                        str += "<option selected value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    } else {
                        str += "<option  value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    }
                }
                $("#queryCategoryLevel1").html(str);
            });
            //回显
            $.getJSON("/BeyondPlatfrom/devController/levelCassify", {parentId: $("#level1").val()}, function (data) {
                $("#queryCategoryLevel2").html("");
                var str = " <option value=\"0\">请选择二级分类</option>";
                for (var i = 0; i < data.length; i++) {
                    if ($("#level2").val() == data[i].id) {
                        str += "<option selected value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    } else {
                        str += "<option  value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    }
                }
                $("#queryCategoryLevel2").html(str);
            });


            $("#queryCategoryLevel1").change(function () {
                var id = $("#queryCategoryLevel1").val();
                $.getJSON("/BeyondPlatfrom/devController/levelCassify", {parentId: id}, function (data) {
                    $("#queryCategoryLevel2").html("");
                    var str = " <option value=\"0\">请选择二级分类</option>";
                    for (var i = 0; i < data.length; i++) {
                        str += "<option  value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    }
                    $("#queryCategoryLevel2").html(str);
                });
            });
            //回显
            $.getJSON("/BeyondPlatfrom/devController/levelCassify", {parentId: $("#level2").val()}, function (data) {
                $("#queryCategoryLevel3").html("");
                var str = " <option value=\"0\">请选择三级分类</option>";
                for (var i = 0; i < data.length; i++) {
                    if ($("#level3").val() == data[i].id) {
                        str += "<option selected value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    } else {
                        str += "<option  value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    }
                }
                $("#queryCategoryLevel3").html(str);
            });


            $("#queryCategoryLevel2").change(function () {
                var id = $("#queryCategoryLevel2").val();
                $.getJSON("/BeyondPlatfrom/devController/levelCassify", {parentId: id}, function (data) {
                    $("#queryCategoryLevel3").html("");
                    var str = " <option value=\"0\">请选择三级分类</option>";
                    for (var i = 0; i < data.length; i++) {
                        str += "<option  value=" + data[i].id + ">" + data[i].categoryName + "</option>"
                    }
                    $("#queryCategoryLevel3").html(str);
                });
            });
        });
    </script>
    <!-- jQuery -->
    <script src="${pageContext.request.contextPath}/statics/vendors/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap -->
    <script src="${pageContext.request.contextPath}/statics/vendors/bootstrap/dist/js/bootstrap.min.js"></script>
    <!-- Custom Theme Scripts -->
    <script src="${pageContext.request.contextPath}/statics/js/custom.min.js"></script>

    <!-- Flot -->
    <script>
        $(document).ready(function () {
            var data1 = [
                [gd(2012, 1, 1), 17],
                [gd(2012, 1, 2), 74],
                [gd(2012, 1, 3), 6],
                [gd(2012, 1, 4), 39],
                [gd(2012, 1, 5), 20],
                [gd(2012, 1, 6), 85],
                [gd(2012, 1, 7), 7]
            ];

            var data2 = [
                [gd(2012, 1, 1), 82],
                [gd(2012, 1, 2), 23],
                [gd(2012, 1, 3), 66],
                [gd(2012, 1, 4), 9],
                [gd(2012, 1, 5), 119],
                [gd(2012, 1, 6), 6],
                [gd(2012, 1, 7), 9]
            ];
            $("#canvas_dahs").length && $.plot($("#canvas_dahs"), [
                data1, data2
            ], {
                series: {
                    lines: {
                        show: false,
                        fill: true
                    },
                    splines: {
                        show: true,
                        tension: 0.4,
                        lineWidth: 1,
                        fill: 0.4
                    },
                    points: {
                        radius: 0,
                        show: true
                    },
                    shadowSize: 2
                },
                grid: {
                    verticalLines: true,
                    hoverable: true,
                    clickable: true,
                    tickColor: "#d5d5d5",
                    borderWidth: 1,
                    color: '#fff'
                },
                colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
                xaxis: {
                    tickColor: "rgba(51, 51, 51, 0.06)",
                    mode: "time",
                    tickSize: [1, "day"],
                    //tickLength: 10,
                    axisLabel: "Date",
                    axisLabelUseCanvas: true,
                    axisLabelFontSizePixels: 12,
                    axisLabelFontFamily: 'Verdana, Arial',
                    axisLabelPadding: 10
                },
                yaxis: {
                    ticks: 8,
                    tickColor: "rgba(51, 51, 51, 0.06)",
                },
                tooltip: false
            });

            function gd(year, month, day) {
                return new Date(year, month - 1, day).getTime();
            }
        });
    </script>
    <!-- /Flot -->

    <!-- JQVMap -->
    <script>
        $(document).ready(function () {
            $('#world-map-gdp').vectorMap({
                map: 'world_en',
                backgroundColor: null,
                color: '#ffffff',
                hoverOpacity: 0.7,
                selectedColor: '#666666',
                enableZoom: true,
                showTooltip: true,
                values: sample_data,
                scaleColors: ['#E6F2F0', '#149B7E'],
                normalizeFunction: 'polynomial'
            });
        });
    </script>
    <!-- /JQVMap -->

    <!-- Skycons -->
    <script>
        $(document).ready(function () {
            var icons = new Skycons({
                    "color": "#73879C"
                }),
                list = [
                    "clear-day", "clear-night", "partly-cloudy-day",
                    "partly-cloudy-night", "cloudy", "rain", "sleet", "snow", "wind",
                    "fog"
                ],
                i;

            for (i = list.length; i--;)
                icons.set(list[i], list[i]);

            icons.play();
        });
    </script>
    <!-- /Skycons -->

    <!-- Doughnut Chart -->
    <script>
        $(document).ready(function () {
            var options = {
                legend: false,
                responsive: false
            };

            new Chart(document.getElementById("canvas1"), {
                type: 'doughnut',
                tooltipFillColor: "rgba(51, 51, 51, 0.55)",
                data: {
                    labels: [
                        "Symbian",
                        "Blackberry",
                        "Other",
                        "Android",
                        "IOS"
                    ],
                    datasets: [{
                        data: [15, 20, 30, 10, 30],
                        backgroundColor: [
                            "#BDC3C7",
                            "#9B59B6",
                            "#E74C3C",
                            "#26B99A",
                            "#3498DB"
                        ],
                        hoverBackgroundColor: [
                            "#CFD4D8",
                            "#B370CF",
                            "#E95E4F",
                            "#36CAAB",
                            "#49A9EA"
                        ]
                    }]
                },
                options: options
            });
        });
    </script>
    <!-- /Doughnut Chart -->

    <!-- bootstrap-daterangepicker -->
    <script>
        $(document).ready(function () {

            var cb = function (start, end, label) {
                console.log(start.toISOString(), end.toISOString(), label);
                $('#reportrange span').html(start.format('MMMM D, YYYY') + ' - ' + end.format('MMMM D, YYYY'));
            };

            var optionSet1 = {
                startDate: moment().subtract(29, 'days'),
                endDate: moment(),
                minDate: '01/01/2012',
                maxDate: '12/31/2015',
                dateLimit: {
                    days: 60
                },
                showDropdowns: true,
                showWeekNumbers: true,
                timePicker: false,
                timePickerIncrement: 1,
                timePicker12Hour: true,
                ranges: {
                    'Today': [moment(), moment()],
                    'Yesterday': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                    'Last 7 Days': [moment().subtract(6, 'days'), moment()],
                    'Last 30 Days': [moment().subtract(29, 'days'), moment()],
                    'This Month': [moment().startOf('month'), moment().endOf('month')],
                    'Last Month': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
                },
                opens: 'left',
                buttonClasses: ['btn btn-default'],
                applyClass: 'btn-small btn-primary',
                cancelClass: 'btn-small',
                format: 'MM/DD/YYYY',
                separator: ' to ',
                locale: {
                    applyLabel: 'Submit',
                    cancelLabel: 'Clear',
                    fromLabel: 'From',
                    toLabel: 'To',
                    customRangeLabel: 'Custom',
                    daysOfWeek: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
                    monthNames: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'],
                    firstDay: 1
                }
            };
            $('#reportrange span').html(moment().subtract(29, 'days').format('MMMM D, YYYY') + ' - ' + moment().format('MMMM D, YYYY'));
            $('#reportrange').daterangepicker(optionSet1, cb);
            $('#reportrange').on('show.daterangepicker', function () {
                console.log("show event fired");
            });
            $('#reportrange').on('hide.daterangepicker', function () {
                console.log("hide event fired");
            });
            $('#reportrange').on('apply.daterangepicker', function (ev, picker) {
                console.log("apply event fired, start/end dates are " + picker.startDate.format('MMMM D, YYYY') + " to " + picker.endDate.format('MMMM D, YYYY'));
            });
            $('#reportrange').on('cancel.daterangepicker', function (ev, picker) {
                console.log("cancel event fired");
            });
            $('#options1').click(function () {
                $('#reportrange').data('daterangepicker').setOptions(optionSet1, cb);
            });
            $('#options2').click(function () {
                $('#reportrange').data('daterangepicker').setOptions(optionSet2, cb);
            });
            $('#destroy').click(function () {
                $('#reportrange').data('daterangepicker').remove();
            });
        });
    </script>
    <!-- /bootstrap-daterangepicker -->

    <!-- gauge.js -->
    <script>
        var opts = {
            lines: 12,
            angle: 0,
            lineWidth: 0.4,
            pointer: {
                length: 0.75,
                strokeWidth: 0.042,
                color: '#1D212A'
            },
            limitMax: 'false',
            colorStart: '#1ABC9C',
            colorStop: '#1ABC9C',
            strokeColor: '#F0F3F3',
            generateGradient: true
        };
        var target = document.getElementById('foo'),
            gauge = new Gauge(target).setOptions(opts);

        gauge.maxValue = 6000;
        gauge.animationSpeed = 32;
        gauge.set(3200);
        gauge.setTextField(document.getElementById("gauge-text"));
    </script>
    <!-- /gauge.js -->
</div>
</body>
</html>